<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9.23作业</title>
    <link rel="stylesheet" href="./css/9.23作业.css">
</head>
<body>
    <header>
        <img src="./images/header-bg.jpg" alt="" class="dh">
        <img src="./images/logo.png" alt="" class="logo">
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Services</li>
            <li>Products</li>
            <li>Contacts</li>
        </ul>
    </header>
    <section>
        <div>
            <!-- 背景图 -->
            <img src="./images/slider-2.jpg" alt="" class="bjt">
        </div>
        <!-- 右上 -->
        <div class="ys">
            <h1>Here We Are!</h1> 
            <p>Duis autern vel eurr iriure dolor in</p>
            <p>hendrerit in vulputate velit esse</p>
            <p>molestie consequat.</p>
            <img src="./images/pagination.png" alt="">
        </div>
        <div class="left">
            <img src="./images/page1-img1.png" alt="">
            <div>
                <p>Who Are We</p>
                <span>Start-Up is one of <span class="y">free website templates</span> created by </span>
                <p class="drd">TemplateMonster.com team. It's optimized for </p>     
                <p class="dsd">1280X1024 screen resolution.</p>
            </div>
        </div>
        <div class="raght">
            <img src="./images/page1-img2.png" alt="">
            <div>
                <h1>Starting UP..</h1>
                <p>The PSD source files of this <span class="y">Sfart-Up Template</span> are</p>
                <p>available for free for the reqistered members of</p>
                <p>TemplatelMonster.com.</p>
            </div>
        </div>
    </section>
    <article>
        <div>
            <h1>Welcome to Ow <span class="y">Star-Up</span>Website!</h1>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p>
        </div>
    </article>
    <!-- 左边彩虹区域 -->
    <aside>
        <div>
            <h1>Our Ideas</h1>
            <!-- 彩虹 -->
            <img src="./images/page3-img1.jpg" alt="" class="ch">
            <!-- 乌鸦 -->
            <img src="./images/page3-img2.jpg" alt="" class="wy">
            <!-- 人群 -->
            <img src="./images/page3-img3.jpg" alt="" class="rq">
        </div>
        <!-- 彩虹下的文字 -->
        <div class="ch2">
            <h1>Nam liber tempor</h1>
            <p>Uwisi eniminim veniam quis</p>
            <p>nostrud exerci tation</p>
            <p>ullamcorperex eacom.</p>
        </div>
        <!-- 乌鸦下面的文字 -->
        <div class="wy2">
            <h1>Cum soluta nobis</h1>
            <p>Duis autem vel eum iriure dolor</p>
            <p>henrerit vulputate velit esse</p>
            <p>molestie.</p>
        </div>
        <!-- 人群下面的文字 -->
        <div class="rq2">
            <h1>Eleifend optiongue</h1>  
            <p>Feugiat nulla facilisis atvero</p>   
            <p>eros et accum-san et iusto odio  </p>   
            <p>dignissim.</p>   
        </div>
        <!-- 彩虹下面的箭头 -->
        <div class="jt">
            <img src="./images/button.png" alt="">
            <h1>Read More</h1>
        </div>
    </aside>
    <!-- 右边日历区域 -->
    <aside>
        <!-- 日历右上方标题 -->
        <h1 class="ys">Latest Events</h1>
        <div>
            <!-- 日历 -->
        <img src="./images/date.png" alt="" class="rl">
        <span>29</span>
        <h3>May,2012</h3>
        <p class="p1">Lorem ipsum dalor sit amet consetetur</p>
        <p class="p2">Sadipscing elitriam nonumy eirmod nonumy eirmod</p>
        <p class="p3">tempor invidunf labore.</p>
        </div>
        <div>
            <!-- 右下日历 -->
            <img src="./images/date.png" alt="" class="rl2">
            <span class="rl21">21</span>
            <h3 class="rl2012">May,2012</h3>
            <p class="p4">Dolore magna aliquyam erat dolor</p>
            <p class="p5">Af vero eos et accusam et justo duo dolores et ea</p>
            <p class="p5">rebum stet clita kasd gubergren.</p>
        </div>
        <!-- 右下方箭头 -->
        <div class="jt2">
            <img src="./images/button.png" alt="">
            <h1>Read More</h1>
        </div>
    </aside>
    <footer>
        <div>
        <p>Professional free web templates <a href="">at www.websitetemplatesonline.com. | Flashtemplates.com.</a> Flash</p>
        <p>Design - the Smart Choice.c2012 Start-Up</p>
        <p><span class="y">Website Template</span> by TemplateMonster.com</p>
        </div>
        <div>
            <p class="p6">Follorv Us:</p>
            <!-- 倒F -->
            <img src="./images/icon-1.jpg" alt="" class="dzm">
            <!-- 正F -->
            <img src="./images/icon-2.jpg" alt="" class="zzm">
            <!-- 乱色 -->
            <img src="./images/icon-3.jpg" alt="" class="dsg">
        </div>
    </footer>
</body>
</html>